<template>
  <div>
    <el-row type="flex" justify="center"> </el-row>
    <el-row type="flex" justify="center">
      <!-- gutter 栅格间距 -->

      <el-col :span="18.5" class="card1">
        <!-- span 栅格占的列数，offset是偏移列数 -->
        <h1 class="hh1">MBTI测试</h1>

        <el-card class="box-card" shadow="never" style="height: 50vh">
          <div class="test">
            迈尔斯-布里格斯类型指标（Myers–Briggs Type Indicator，MBTI）
          </div>
          <div class="test">
            是由美国作家伊莎贝尔·布里格斯·迈尔斯和她的母亲凯瑟琳·库克·布里格斯共同制定的一种人格类型理论模型。
          </div>
          <div class="test">
            该指标以瑞士心理学家卡尔·荣格划分的8种心理类型为基础，从而将荣格的心理类型理论付诸实践，经过二十多年的研究后，编制成了迈尔斯-布里格斯类型指标。
          </div>
          <div class="test">
            迈尔斯在荣格的优势功能和劣势功能、主导功能和从属功能等概念的基础上，进一步提出功能等级等概念，并有效的为每一种类型确定了其功能等级的次序，又提出了类型的终生发展理论，形成四个维度。
          </div>
        </el-card>

        <div style="margin: 0 auto">
          <el-divider></el-divider>

          <el-row type="flex" justify="center">
            <el-form-item class="mb-4">
              <el-button
                type="waring"
                plain
                @click="this.$router.push({ path: '/test', name: 'Test' })"
                >开始答题</el-button
              >
            </el-form-item>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from "vue";
import {
  ChatDotRound,
  ChatLineRound,
  ChatRound,
} from "@element-plus/icons-vue";
name: "Teststart";
const value = ref();
const icons = [ChatRound, ChatLineRound, ChatDotRound];
</script>

<style scoped>
.hh1 {
  font-size: 40px;
  text-align: center;
  color: rgb(90, 99, 107);
}
.el-row {
  margin-bottom: 50px;
}
.grid-content {
  border-radius: 2px;
  min-height: 5px;
  min-width: 100px;
  text-align: center;
}
.card1 {
  height: 80vh;
  width: 1100px;
  border-radius: 2px;
}
.test{
  font-weight: bolder;
  height: 70px;
  color: black;
}
</style>
